<template>
	<view class="container">
		<view class="register-card">
			<view class="card-header">
				<view class="home-link" @click="goHome">
					<text>← 返回首页</text>
				</view>
				<text class="welcome-text">注册新账号</text>
			</view>
			
			<view class="form-item">
				<view class="input-wrapper">
					<text class="iconfont icon-edit"></text>
					<input type="text" v-model="formData.nickname" placeholder="请输入昵称" />
				</view>
				<text class="error-message" v-if="errors.nickname">{{ errors.nickname }}</text>
			</view>
			
			<view class="form-item">
				<view class="input-wrapper">
					<text class="iconfont icon-user"></text>
					<input type="text" v-model="formData.username" placeholder="请输入账号" />
				</view>
				<text class="error-message" v-if="errors.username">{{ errors.username }}</text>
			</view>
			
			<view class="form-item">
				<view class="input-wrapper">
					<text class="iconfont icon-lock"></text>
					<input type="password" v-model="formData.password" placeholder="请输入密码" password />
				</view>
				<text class="error-message" v-if="errors.password">{{ errors.password }}</text>
			</view>
			
			<view class="form-item">
				<view class="input-wrapper">
					<text class="iconfont icon-lock"></text>
					<input type="password" v-model="formData.confirmPassword" placeholder="请确认密码" password />
				</view>
				<text class="error-message" v-if="errors.confirmPassword">{{ errors.confirmPassword }}</text>
			</view>
			
			<view class="form-item">
				<view class="input-wrapper">
					<text class="iconfont icon-email"></text>
					<input type="text" v-model="formData.email" placeholder="请输入邮箱" />
				</view>
				<text class="error-message" v-if="errors.email">{{ errors.email }}</text>
			</view>
			
			<view class="form-item role-form-item">
				<text class="label">身份</text>
				<picker @change="handleRoleChange" :value="roleIndex" :range="roleLabels">
					<view class="picker">
						<text>{{ roleLabels[roleIndex] }}</text>
					</view>
				</picker>
			</view>
			
			<view class="button-group">
				<button type="primary" @click="handleRegister" class="register-btn">立即注册</button>
				<view class="login-link" @click="handleLogin">
					<text>已有账号？立即登录</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import http, { SERVER_BASE_URL } from '@/utils/request';

export default {
	data() {
		return {
			formData: {
				nickname: '',
				username: '',
				password: '',
				confirmPassword: '',
				email: ''
			},
			errors: {
				nickname: '',
				username: '',
				password: '',
				confirmPassword: '',
				email: ''
			},
			// 角色选项
			roleOptions: [
				{ value: 'USER', label: '普通用户' },
				{ value: 'RIDER', label: '配送骑手' }
			],
			role: 'USER',
			roleIndex: 0
		};
	},
	computed: {
		roleLabels() {
			return this.roleOptions.map(option => option.label);
		}
	},
	methods: {
		// 去首页
		goHome() {
			uni.switchTab({
				url: '/pages/index/index'
			});
		},
		
		// 处理角色选择
		handleRoleChange(e) {
			const index = e.detail.value;
			this.roleIndex = index;
			this.role = this.roleOptions[index].value;
		},
		
		// 前往登录页面
		handleLogin() {
			uni.navigateTo({
				url: '/pages/login/login'
			});
		},
		
		// 验证邮箱格式
		isValidEmail(email) {
			const regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
			return regex.test(email);
		},
		
		// 验证表单
		validateForm() {
			let isValid = true;
			
			// 重置错误信息
			this.errors = {
				nickname: '',
				username: '',
				password: '',
				confirmPassword: '',
				email: ''
			};
			
			// 验证昵称
			if (!this.formData.nickname) {
				this.errors.nickname = '请输入昵称';
				isValid = false;
			} else if (this.formData.nickname.length > 16) {
				this.errors.nickname = '昵称最多16个字符';
				isValid = false;
			}
			
			// 验证账号
			if (!this.formData.username) {
				this.errors.username = '请输入账号';
				isValid = false;
			} else if (this.formData.username.length < 3 || this.formData.username.length > 16) {
				this.errors.username = '账号长度在3到16个字符之间';
				isValid = false;
			}
			
			// 验证密码
			if (!this.formData.password) {
				this.errors.password = '请输入密码';
				isValid = false;
			} else if (this.formData.password.length < 6 || this.formData.password.length > 16) {
				this.errors.password = '密码长度在6到16个字符之间';
				isValid = false;
			}
			
			// 验证确认密码
			if (!this.formData.confirmPassword) {
				this.errors.confirmPassword = '请确认密码';
				isValid = false;
			} else if (this.formData.confirmPassword !== this.formData.password) {
				this.errors.confirmPassword = '两次输入密码不一致';
				isValid = false;
			}
			
			// 验证邮箱
			if (!this.formData.email) {
				this.errors.email = '请输入邮箱';
				isValid = false;
			} else if (!this.isValidEmail(this.formData.email)) {
				this.errors.email = '请输入有效的邮箱地址';
				isValid = false;
			}
			
			return isValid;
		},
		
		// 注册
		async handleRegister() {
			// 验证表单
			if (!this.validateForm()) return;
			
			// 显示加载中
			uni.showLoading({
				title: '注册中...'
			});
			
			try {
				const response = await http.post('/register', {
					nickname: this.formData.nickname,
					username: this.formData.username,
					password: this.formData.password,
					role: this.role,
					email: this.formData.email
				});
				
				// 隐藏加载提示
				uni.hideLoading();
				
				if (response.code === 200) {
					uni.showToast({
						title: '注册成功',
						icon: 'success'
					});
					
					// 注册成功后跳转到登录页
					setTimeout(() => {
						uni.navigateTo({
							url: '/pages/login/login'
						});
					}, 1500);
				} else {
					// 处理特定错误码
					if (response.code === 400) {
						// 用户输入数据有误
						if (response.message.includes('用户名已存在')) {
							this.errors.username = '该用户名已被注册';
						} else if (response.message.includes('邮箱已存在')) {
							this.errors.email = '该邮箱已被注册';
						} else {
							uni.showToast({
								title: response.message || '注册失败',
								icon: 'none'
							});
						}
					} else {
						uni.showToast({
							title: response.message || '注册失败',
							icon: 'none'
						});
					}
				}
			} catch (error) {
				uni.hideLoading();
				// 提取错误信息并显示
				const errorMsg = error.message || '注册失败，请检查网络';
				uni.showToast({
					title: errorMsg,
					icon: 'none'
				});
				console.error('注册请求失败:', error);
			}
		}
	}
};
</script>

<style>
.container {
	padding: 30rpx;
	background-color: #f5f5f5;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.register-card {
	background-color: #ffffff;
	border-radius: 12rpx;
	padding: 40rpx;
	box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
}

.card-header {
	position: relative;
	text-align: center;
	margin-bottom: 50rpx;
	padding-top: 20rpx;
}

.home-link {
	position: absolute;
	left: 0;
	top: 0;
	font-size: 28rpx;
	color: #409EFF;
}

.welcome-text {
	font-size: 48rpx;
	font-weight: bold;
}

.form-item {
	margin-bottom: 30rpx;
}

.input-wrapper {
	display: flex;
	align-items: center;
	height: 90rpx;
	padding: 0 30rpx;
	background-color: #f5f5f5;
	border-radius: 45rpx;
}

.input-wrapper input {
	flex: 1;
	height: 90rpx;
	font-size: 30rpx;
}

.iconfont {
	font-size: 40rpx;
	color: #999;
	margin-right: 20rpx;
}

.error-message {
	color: #F56C6C;
	font-size: 24rpx;
	margin-top: 10rpx;
	padding-left: 20rpx;
}

.role-form-item {
	display: flex;
	align-items: center;
}

.label {
	font-size: 30rpx;
	color: #333;
	margin-right: 20rpx;
	width: 100rpx;
}

.picker {
	flex: 1;
	height: 90rpx;
	background-color: #f5f5f5;
	border-radius: 45rpx;
	padding: 0 30rpx;
	display: flex;
	align-items: center;
}

.button-group {
	margin-top: 60rpx;
	display: flex;
	flex-direction: column;
	gap: 30rpx;
}

.register-btn {
	width: 100%;
	height: 90rpx;
	border-radius: 45rpx;
	font-size: 32rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}

.login-link {
	text-align: center;
	font-size: 28rpx;
	color: #409EFF;
	padding: 20rpx;
}
</style> 